.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  width: 80px;
  height: 40px;
  line-height: 40px;
}
.btn:hover {
  opacity: 0.8;
}

.btn:active {
  opacity: .9;
}
.click {
  user-select: none;
  cursor: pointer;
}
/* ! 主按钮1 */

.btn-main {
  border: 1px solid var(--main-color);
  background: var(--main-color);
  color: #fff;
}
.plain.btn-main {
  border: 1px solid var(--main-color);
  background: transparent;
  color: var(--main-color);
}
/* !主按钮2 */
.btn-main-2 {
  border: 1px solid var(--main-color-2);
  background: var(--main-color-2);
  color: #fff;
}
.plain.btn-main-2 {
  border: 1px solid var(--main-color-2);
  background: transparent;
  color: var(--main-color-2);
}
/* ! 红色按钮 */
.btn-red {
  background-color: var(--red-color);
  color: #ffffff;
}

.btn-red.plain {
  border: 1px solid var(--red-color);
  background: transparent;
  color: var(--red-color);
}

/* ! 绿色按钮 */

.btn-green {
  background-color: var(--green-color);
  color: #ffffff;
}
.btn-green.plain {
  border: 1px solid var(--green-color);
  background: transparent;
  color: var(--green-color);
}

/* ! 灰色按钮 */

.btn-gray {
  background-color: var(--gray-color);
  color: #ffffff;
}

.btn-gray.plain {
  border: 1px solid var(--gray-color);
  background: transparent;
  color: var(--gray-color);
}
.btn-gray.gradient {
  background: linear-gradient(180deg, #ffffff 0%, #d8d8d8 100%);
  color: #aaaaaa;
}

/* ! 橙色按钮 */

.btn-orange {
  background-color: var(--orange-color);
  color: #ffffff;
}
.btn-orange.plain {
  border: 1px solid var(--orange-color);
  background: transparent;
  color: var(--orange-color);
}

/* ! 黄色按钮 */

.btn-yellow.plain {
  color: var(--yellow-color);
  background: transparent;
  border: 1px solid var(--yellow-color);
}
.btn-yellow {
  color: #fff;
  background: var(--yellow-color);
}
